import React, { useState } from 'react';
import { Outlet, useNavigate, useLocation } from 'react-router-dom'
import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
  BulbFilled
} from '@ant-design/icons';
import style from './index.module.css'
import type { MenuProps } from 'antd'
import type { MenuClickEventHandler  } from 'rc-menu/lib/interface'
import { Layout, Menu, theme, Switch } from 'antd';
import { useAppDispatch, useAppSelector } from '@/hooks/app.hooks'
import { updateTheme } from '@/slice/configSlice';


const { Header, Content, Footer, Sider } = Layout;

type MenuItem = Required<MenuProps>['items'][number];

// function getItem(
//     label: React.ReactNode,
//     key: React.Key,
//     icon?: React.ReactNode,
//     children?: MenuItem[],
//   ): MenuItem {
//     return {
//       key,
//       icon,
//       children,
//       label,
//     } as MenuItem;
//   }

  const items: MenuItem[] = [
    {
      label: '常用工具',
      key: '/home',
      icon: <PieChartOutlined />,
      
    },
    {
      label: '开发工具',
      key: '/about',
      icon: <DesktopOutlined />
    },
    {
      label: '格式转换',
      key: '/home/pa',
      icon: <TeamOutlined />
    },
    {
      label: '生活日常',
      key: '/home/pb',
      icon: <FileOutlined />
    },
    {
      label: '热站导航',
      key: '/sub1',
      icon: <UserOutlined />,
      // children: [
      //   {
      //     label: 'Tom',
      //     key: '/tom',
      //     icon: <UserOutlined />,
      //   },
      //   {
      //     label: 'Bill',
      //     key: '/bill',
      //     icon: <UserOutlined />,
      //   }
      // ]
    },
  ];




  const Home: React.FC = () => {
    const [collapsed, setCollapsed] = useState(false);
    const { token: { colorBgContainer } } = theme.useToken();
    // const headerHeight = theme.useToken().token.Layout?.headerHeight
    const navigate = useNavigate();
    const location = useLocation()
    const menuClick: MenuClickEventHandler = (e) => {
      console.log(e)
      navigate(e.key)
    }
    const myTheme = useAppSelector(state => state.config.theme)
    const dispatch = useAppDispatch()

    return (
      <Layout hasSider>
        <Sider
            theme={myTheme}
            collapsedWidth={50}
            width={150}
            collapsed={collapsed}
            onCollapse={(value) => setCollapsed(value)}
            style={{
              overflow: 'auto',
              height: '100vh',
              position: 'fixed',
              left: 0,
              top: 0,
              bottom: 0,
            }}>
          <div className="demo-logo-vertical" />
          <Menu
            theme={myTheme}
            defaultSelectedKeys={[location.pathname]}
            mode="inline"
            items={items}
            onClick={menuClick}/>
        </Sider>
        <Layout style={{marginLeft: '150px'}}>
          <Header style={{ padding: 0, margin: '16px', background: colorBgContainer }} >
            <div className={style.headerDiv}>
              <Switch
                  checkedChildren={<BulbFilled />}
                  unCheckedChildren={<BulbFilled />}
                  defaultChecked
                  onChange={checked => {dispatch(updateTheme(checked ? 'light': 'dark'))}}
                />
            </div>
          </Header>
          <Content style={{ margin: '0 16px' }}>
            <div style={{ padding: 24, minHeight: 360, background: colorBgContainer }}>
              <Outlet/>
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>Ant Design ©2023 Created by Ant UED</Footer>
        </Layout>
      </Layout>
    );
  };
export default Home